<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OUIF : Flexible Image Row List</title>
<link rel="stylesheet" type="text/css" href="rListiFlexible.css">
</head>
<body style="width:600px">
<h1>Flexible Image+Text Row List</h1>
<div class="rListiFlexible">
	<ul>
		<li>
			<a href="#"><span class="thumb"><img src="@thumb.jpg" width="160" alt=""></span> <strong>이미지의 너비가 가변폭이어야 할 때</strong></a>
			<p>이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다. 이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다. 이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다. 이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다. 이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다. </p>
		</li>
		<li>
			<a href="#"><span class="thumb"><img src="@thumb.jpg" width="120" alt=""></span> <strong>이미지의 너비가 가변폭이어야 할 때</strong></a>
			<p>이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다.</p>
		</li>
		<li>
			<a href="#"><span class="thumb"><img src="@thumb.jpg" width="80" alt=""></span> <strong>이미지의 너비가 가변폭이어야 할 때</strong></a>
			<p>이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다.</p>
		</li>
		<li>
			<a href="#"><strong>이미지가 없는 항목</strong></a>
			<p>이미지가 포함되지 않은 경우 이미지 자리를 표시하지 않고 글만 출력 합니다. 이 목록 스타일의 장점은 가변폭 이미지를 수용할 수 있다는 점 입니다. 단점은 서로 다른 이미지 크기 때문에 수직 정렬이 맞지 않아서 정돈되지 않은 느낌을 줍니다.</p>
		</li>
	</ul>
</div>
<br>
<button type="button" onClick="$('.rListiFlexible').attr('class','flexible')">CSS(X)</button>
<button type="button" onClick="$('.flexible').attr('class','rListiFlexible')">CSS(O)</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
